{% extends "base.html" %}

{% block title %}声音监控{% endblock %}

{% block sidebar %}
<div class="list-group">
    <a href="{{ url_for('audio_monitor') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_monitor' %}active{% endif %}"><i class="bi bi-mic"></i> 声音监控</a>
    <a href="{{ url_for('audio_wake') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_wake' %}active{% endif %}"><i class="bi bi-mic-fill"></i> 语音唤醒</a>
    <a href="{{ url_for('audio_tts') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_tts' %}active{% endif %}"><i class="bi bi-chat-text"></i> 语音合成</a>
    <a href="{{ url_for('audio_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_test' %}active{% endif %}"><i class="bi bi-volume-up"></i> 播放测试</a>
    <a href="{{ url_for('audio_speak_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_speak_test' %}active{% endif %}"><i class="bi bi-mic"></i> 语音识别</a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid px-2">
    <div class="row">
        <!-- 左侧设置与历史 -->
        <div class="col-md-3">
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-sliders"></i> 监控设置</h5>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="enableMonitoring">
                            <label class="form-check-label" for="enableMonitoring">启用声音监控</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">音量阈值 (dB)</label>
                        <input type="range" class="form-range" id="volumeThreshold" min="0" max="100" value="50">
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="enableAlert">
                            <label class="form-check-label" for="enableAlert">启用异常声音提醒</label>
                        </div>
                    </div>
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" onclick="startRecording()">
                            <i class="bi bi-record-circle"></i> 开始录音
                        </button>
                        <button class="btn btn-info" onclick="saveSettings()">
                            <i class="bi bi-save"></i> 保存设置
                        </button>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-clock-history"></i> 声音记录</h5>
                    <div class="table-responsive" style="max-height: 260px; overflow-y: auto;">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>音量</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody id="audioLogList">
                                <!-- 这里将通过JavaScript动态加载声音记录 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧实时监控 -->
        <div class="col-md-9">
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-mic"></i> 实时声音监控</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6><i class="bi bi-soundwave"></i> 声音波形</h6>
                            <canvas id="audioWaveform" class="w-100" height="180"></canvas>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="bi bi-volume-up"></i> 音量监测</h6>
                            <div class="progress mb-2" style="height: 30px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 0%" id="volumeBar">0 dB</div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <small>安静</small>
                                <small>正常</small>
                                <small>嘈杂</small>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> 当前为实时声音监控，波形和音量会动态变化。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let audioContext;
let analyser;
let microphone;
let isRecording = false;

function startRecording() {
    if (!isRecording) {
        // 实现录音功能
        isRecording = true;
    } else {
        // 停止录音
        isRecording = false;
    }
}

function saveSettings() {
    // 保存监控设置
}

function loadAudioLog() {
    // 加载声音记录
}

document.addEventListener('DOMContentLoaded', function() {
    loadAudioLog();
});
</script>
{% endblock %} 